<!--
 * @Description: 邮件服务器设置
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-10-18 15:21:15
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <div class="info">
      <!-- 邮件服务器设置 -->
      <h1 class="title">邮件服务器设置</h1>
      <el-form
        :model="form"
        class="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="right"
      >
        <!-- 服务器地址 -->
        <el-form-item
          label="服务器"
          prop="host"
          :rules="[{required: true, message: '请检查必填项！', trigger: 'blur'}]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.host" :disabled="!isEdit" />
          </el-col>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item :label="$t('systerms.Port')" prop="port">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.port" :disabled="!isEdit" :min="0" :max="65535" />
          </el-col>
        </el-form-item>
        <!-- 发件人地址 -->
        <el-form-item
          label="发件人邮箱"
          prop="username"
          :rules="[
            {required: true, message: '请检查必填项！', trigger:'blur'},
            { pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, message: '邮箱格式不正确' ,trigger: 'blur'}
          ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.username" :disabled="!isEdit" placeholder="请输入邮箱地址" />
          </el-col>
        </el-form-item>
        <!--邮件服务器认证的密码 -->
        <el-form-item
          label="认证密码"
          prop="password"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input
              v-model="form.password"
              :disabled="!isEdit"
              placeholder="邮件服务器认证的密码"
              type="password"
              @input="inputChange"
              maxlength="16"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <!-- 保存  编辑-->
          <el-button
            type="primary"
            style="width: 90px"
            @click="emails"
            v-power="2"
          >{{isEdit ? $t('systerms.Save') : $t('systerms.Edit')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import crypo from 'crypto-browserify';
export default {
  data () {
    return {
      isEdit: false,
      pwd: '',
      form: {
        host: 'smtp.xxx.com',
        port: 0,
        username: 'xxx@xxx.com',
        password: null,
        sender: 'xxx@xxx.com',
      },
      rules: {},
      emailLoading: false
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getEmailOption();
    });
  },
  methods: {
    // 获取当前邮件服务器配置
    getEmailOption () {
      let _this = this;
      _this.$http.post({
        url: '/api/gateway/email/all'
      }).then(async res => {
        if (res.length > 0) {
          let response = await this.$http.get({
            url: '/action/csrf'
          });
          _this.form = {
            id: res[0].id ? res[0].id : null,
            host: res[0].host,
            port: res[0].port,
            username: res[0].username,
            sender: res[0].sender,
          };
          const tokenValue = response.token;
          const cipher = crypo.createDecipher('aes-128-ecb', tokenValue);
          _this.form.password = cipher.update(res[0].password, 'base64', 'utf8') + cipher.final('utf8');
        } else {
          _this.form = {
            host: null,
            port: 0,
            username: null,
            password: null,
            sender: null,
          };
        }
      });
    },
    // 提交邮件服务器配置项
    async emails () {
      let _this = this;
      if (_this.isEdit) {
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            _this.isEdit = !_this.isEdit;
            _this.emailLoading = true;
            let response = await this.$http.get({
              url: '/action/csrf'
            });
            const tokenValue = response.token;
            const cipher = crypo.createCipher('aes-128-ecb', tokenValue);
            let params = {
              host: _this.form.host ? _this.form.host.split('/')[0] : null,
              port: _this.form.port,
              auth: true,
              username: _this.form.username,
              sender: _this.form.username,
            };
            params.password = cipher.update(_this.form.password, 'utf8', 'base64') + cipher.final('base64');
            if (_this.form.id) {
              params.id = _this.form.id;
            }
            _this.$http.put({
              url: '/api/gateway/email/create',
              data: params,
            }).then(async res => {
              _this.emailLoading = false;
              _this.getEmailOption();
              _this.$message.success('更新成功！');
            }).catch(err => {
              _this.emailLoading = false;
              _this.$message.error('操作失败');
            });
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    },
    // 强制刷新密码框
    inputChange () {
      this.$forceUpdate();
    },
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }
      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }
      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }
      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }
    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }
    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;
      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }
        h2 {
          font-size: 20px;
          margin-top: 20px;
        }
        .task {
          margin-top: 15px;
          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }
          span {
            font-size: 15px;
          }
        }
      }
      .right-wrap {
        display: flex;
        align-items: center;
        img {
          display: none;
        }
      }
    }
    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>
